<template>
	<view>
		<u-grid :col="3">
			<u-grid-item v-for="(item,index) in list" :key="index" @tap="clickItem(index,list)">
				<u-badge v-if="item.count" :count="item.count" :offset="item.offset"></u-badge>
				<image v-if="item.image" :src="item.image" class="badge-icon"></image>
				<u-icon :name="item.icon" :size="item.size"></u-icon>
				<view class="grid-text">{{item.text}}</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>
<script>
	import common from '@/mixins/common.js'
	export default {
		mixins: [common],
		data() {
			return {
				list: [{
						text: '图片1',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'photo',
						size: 46,
						count: 9,
						offset: [20, 20],
						image: ''
					},
					{
						text: '图片2',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'lock',
						size: 46,
						count: '',
						offset: [],
						image: '/static/image/icon/hot6.png'
					},
					{
						text: '图片3',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'hourglass',
						size: 46,
						count: '',
						offset: [],
						image: ''
					},
					{
						text: '图片4',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'photo',
						size: 46,
						count: '',
						offset: [],
						image: ''
					},
					{
						text: '图片5',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'lock',
						size: 46,
						count: '',
						offset: [],
						image: ''
					},
					{
						text: '图片6',
						type: 'navigateTo',
						url: '/pages/test/page',
						icon: 'hourglass',
						size: 46,
						count: '',
						offset: [],
						image: ''
					},
				]
			}
		},
		methods: {

		}
	}
</script>
<style scoped lang="scss">
	.badge-icon {
		position: absolute;
		top: 0rpx;
		right: 0rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
</style>
